<template>
<div class="header_top">
    <router-link to="/">
        <img class="logo" :src="img" alt="">
    </router-link>
    <div class="header_right">
        <ul>
            <router-link tag="li" to="/">
                <a :class="{'active_link':activeLink === 'home'}">首页</a>
            </router-link>
            <router-link tag="li" to="/w/register">
                <a>注册</a>
            </router-link>
            <router-link tag="li" to="/w/login">
                <a>登录</a>
            </router-link>
        </ul>
    </div>
</div>
</template>

<script>
    export default {
        name: "TopHeader",
        props:{
            activeLink:String,
        },
        data(){
            return{
                img:require('../../../assets/img/logo.png'),
            }
        }
    }
</script>

<style scoped>
    .header_top{
        line-height: 60px;
    }
    .logo{
        width: 60px;
        height:60px;
    }
    .header_right{
        float: right;
    }
    .header_right ul{
        display: flex;
    }
    .header_right ul li{
        margin-left: 20px;
    }
    .active_link{
        color:red;
    }
</style>
